<template>
  <div class="player">
    <div class="player_ui">
      <div class="player_head">
        <a class="p_h_btn" href="#/list">
          <span class="material-icons">chevron_left</span>返回
        </a>
        <div class="player_music_name">{{music.name}}</div>
        <div class="player_music_author">{{music.author}}</div>
      </div>
      <div class="player_cd">
        <div class="img" :class="playstate ? 'play' : 'stop'">
          <img :src="music.img_path">
        </div>
      </div>
      <div class="player_lyric">
        <ul :style="`transform: translateY(-${moveDistancee}rem)`">
          <li v-for="(iten, i) in lyric" :class="{'on':i==lyricIndex}" :key="i">{{iten[1]}}</li>
        </ul>
      </div>
      <div class="player_ctrl">
        <div class="time_line">
          <span class="l_time">{{currtTime}}</span>
          <div class="c_line">
            <slider v-model="count" min="0" :max="audioTimeStamp" @change="sliderchange" @drag-start="isTouch=true" @drag-end="isTouch=false">
              <template #button>
                <div class="custom-button">
                  <a></a>
                </div>
              </template>
            </slider>
          </div>
          <span class="r_time">{{audioTime}}</span>
        </div>
        <div class="player_btns">
          <span class="material-icons" @click="prev">skip_previous</span>
          <span class="material-icons c" @click="play">{{ playstate ? 'pause_circle_outline' : 'play_circle_outline'}}</span>
          <span class="material-icons" @click="next">skip_next</span>
        </div>
      </div>
    </div>
    <img class="player_bg" :src="music.img_path">
  </div>
</template>

<script>
import { Slider } from 'vant'
function parseLyric (text) {
  var lyric = text.split('\n')
  var lrc = []
  for (var i = 0; i < lyric.length; i++) {
    var line = lyric[i].split(']')
    var sj = line[0].replace('[', '').split(':')
    var t1 = sj[0]
    var t2 = sj[1]
    if (line[1]) {
      lrc.push([(t1 * 60) + (t2 * 1), line[1]])
    }
  }
  return lrc
}
export default {
  components: {
    Slider
  },
  data () {
    return {
      lyricIndex: 0,
      moveDistancee: 0,
      isTouch: false,
      count: 0
    }
  },
  watch: {
    count (val) {
      for (let i = 0; i < this.lyric.length; i++) {
        var a1 = this.lyric[i]
        var a2 = this.lyric[i + 1] || false
        if (a2) {
          if (a1[0] <= val && val < a2[0]) {
            this.lyricIndex = i
            if (i > 2) {
              this.moveDistancee = (i - 2) * 0.7
            } else {
              this.moveDistancee = 0
            }
            break
          }
        } else {
          this.lyricIndex = i
          this.moveDistancee = (i - 2) * 0.7
        }
      }
    },
    timeStamp () {
      if (!this.isTouch) {
        this.count = this.timeStamp
      }
    },
    playIndex () {
      this.lyricIndex = 0
      this.count = 0
    }
  },
  methods: {
    sliderchange (val) {
      this.$store.commit('setJumpTimeStamp', val)
    },
    play () {
      this.$store.commit('setplaystate', !this.playstate)
    },
    prev () {
      this.$store.commit('setPlayIndex', '-')
    },
    next () {
      this.$store.commit('setPlayIndex', '+')
    }
  },
  computed: {
    lyric () {
      return parseLyric(this.music.lyric)
    },
    playIndex () {
      return this.$store.state.index
    },
    music () {
      return this.$store.state.list[this.playIndex]
    },
    audioTimeStamp () {
      return this.$store.state.audioTimeStamp
    },
    audioTime () {
      var d = new Date(this.audioTimeStamp * 1000)
      var m = d.getMinutes()
      var s = d.getSeconds()
      if (m < 10) m = '0' + m
      if (s < 10) s = '0' + s
      return m + ':' + s
    },
    currtTime () {
      var d = new Date(this.timeStamp * 1000)
      var m = d.getMinutes()
      var s = d.getSeconds()
      if (m < 10) m = '0' + m
      if (s < 10) s = '0' + s
      return m + ':' + s
    },
    timeStamp () {
      return this.$store.state.timeStamp
    },
    playstate () {
      return this.$store.state.playstate
    }
  }
}
</script>

<style lang="scss">
.player {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.player_ui {
  color: #fff;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .player_head {
    line-height: 1;
    padding: .3rem 0;
    .player_music_name {
      text-align: center;
      font-size: .5rem;
    }
    .player_music_author {
      text-align: center;
      font-size: .4rem;
      margin-top: .2rem;
    }
    .p_h_btn {
      position: absolute;
      left: 0;
      font-size: .4rem;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      span {
        margin-top: -1px;
      }
    }
  }
  .player_lyric {
    flex: 1;
    margin-bottom: 15px;
    overflow: hidden;
    text-align: center;
    font-size: .4rem;
    ul {
      transition: 300ms;
      li {
        height: .7rem;
        line-height: .7rem;
      }
    }
    .on {
      color: #44d99e;
    }
  }
  .player_ctrl {
    font-size: 12px;
    margin-bottom: 35px;
    .time_line {
      display: flex;
      align-items: center;
      line-height: 1;
      margin-bottom: 10px;
      .l_time {
        width: 50px;
        text-align: right;
        margin-right: 15px;
      }
      .c_line {
        flex: 1;
        // padding: 0 10px;
        .custom-button {
          // background: #fff;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          a {
            height: 14px;
            width: 14px;
            background: #fff;
            border-radius: 14px;
          }
        }
      }
      .r_time {
        width: 50px;
        margin-left: 15px;
      }
    }
    .player_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 50px;
        margin: 0 .3rem;
      }
      span.c {
        font-size: 70px;
      }
    }
  }
}
.player_cd {
  margin: 5px 20px 20px;
  .img {
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: 10px solid rgba(255,255,255,.2);
    background: no-repeat center;
    background-size: cover;
    overflow: hidden;
    animation: rotate360 6s linear 0s infinite forwards;
    animation-play-state: paused;
    img {
      width: 100%;
      display: block;
    }
  }
  .play {
    animation-play-state: running;
  }
}

@keyframes rotate360 {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.player_bg {
  position: absolute;
  top: 0;
  left: -50%;
  z-index: 3;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2) translateZ(0);
  filter: blur(40px);
}
</style>
